<template>
  <div class="form-edit-item">
    <el-card
      class="edit-f-item"
      v-if="JSON.stringify(item.formConfig) != '{}'"
    >
      <div slot="header" class="clearfix">
        <span>{{item.formConfig.show_name || '未填写标题'}}</span>
      </div>
      <el-form v-if="JSON.stringify(item.formConfig) != '{}'" label-position="top">
        <el-form-item label="是否为必填项" size="small">
          <el-radio-group v-model="item.formConfig.required">
            <el-radio :disabled="item.formConfig.disabled" :label="1">是</el-radio>
            <el-radio :disabled="item.formConfig.disabled" :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="item.formConfig.show_name" size="small"/>
        </el-form-item>
        <el-form-item
          v-if="item.formConfig.type == 1 || item.formConfig.type == 7"
          label="提示(输入框无内容时默认显示)"
        >
          <el-input
            :placeholder="'请填写' + item.formConfig.show_name"
            v-model="item.formConfig.placeholder"
            size="small"
          />
        </el-form-item>
        <el-form-item
          v-if="item.formConfig.type == 7"
          label="设置日期选择范围（不填为无限制）"
        >
          <el-date-picker
            type="datetimerange"
            unlink-panels
            format="yyyy-MM-dd"
            v-model="item.formConfig.options"
            placeholder="设置日期的可选范围"
            style="width:100%"
            size="small"
          ></el-date-picker>
        </el-form-item>
        <DropDown
          @on-save="saveItem"
          v-if="item.formConfig.type == 9"
          :options="item.formConfig.options"
        />
        <el-form-item
          v-for="(option, num) in item.formConfig.options"
          :key="option.key"
          v-if="item.formConfig.type == 3 || item.formConfig.type == 4"
          :label="'选项' + (num + 1)"
        >
          <div class="option">
            <el-row>
              <el-col :span="12">
                <el-input
                  :disabled="item.formConfig.disabled"
                  placeholder="请填写"
                  v-model="option.value"
                  size="small"
                />
              </el-col>
              <el-col :span="12">
                <div class="btn-area">
                  <el-button
                    :disabled="item.formConfig.disabled"
                    @click.stop="
                      formItemChange(item.formConfig.options, num, num - 1)
                    "
                    icon="el-icon-top"
                    circle
                    size="small"
                  ></el-button>
                  <el-button
                    :disabled="item.formConfig.disabled"
                    @click.stop="
                      formItemChange(item.formConfig.options, num, num + 1)
                    "
                    icon="el-icon-bottom"
                    circle
                    size="small"
                  ></el-button>
                  <el-button
                    :disabled="item.formConfig.disabled"
                    @click.stop="
                      formItemDelete(item.formConfig.options, num, false)
                    "
                    icon="el-icon-delete-solid"
                    circle
                    size="small"
                  ></el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="item.formConfig.type == 3 || item.formConfig.type == 4"
            :disabled="item.formConfig.disabled"
            @click="addOption(item.formConfig.options)"
            type="primary"
            style="margin-bottom:8px"
            size="small"
            >添加选项</el-button
          >
          <el-button
            v-if="item.formConfig.type == 3 || item.formConfig.type == 4"
            :disabled="item.formConfig.disabled"
            @click="openBatch(item.formConfig.options, index)"
            type="primary"
            style="margin-bottom:8px;margin-left:8px;"
            size="small"
            >批量添加或修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog
      @on-ok="batchAdd"
      title="批量添加或修改(每行是一个选项)"
      :visible.sync="value1"
      class-name="vertical-center-modal"
    >
      <el-input type="textarea" v-model="batch_add_text" :rows="16" size="small"/>
    </el-dialog>
  </div>
</template>

<script>
import DropDown from "./Multileve-drop-down-menu";

export default {
  components: { DropDown },
  props: {
    item: Object
  },
  data() {
    return {
      value1: false,
      batch_add_text: ""
    };
  },
  methods: {
    saveItem(options) {
      this.item.formConfig.options = options;
    },
    // 删除项
    formItemDelete(arr, index, clear) {
      arr.splice(index, 1);
      if (clear) this.formConfig = {};
    },
    formItemChange(arr, index1, index2) {
      if (index1 == 0 && index1 > index2) return;
      if (index1 >= arr.length - 1 && index1 < index2) return;
      // if (arr[index2].disabled) return;
      arr.splice(index2, 1, ...arr.splice(index1, 1, arr[index2]));
    },
    addOption(row) {
      row.push({});
      let i = 1;
    },
    openBatch(options, i) {
      this.options = i;
      this.value1 = true;
      let text = "";
      options.forEach(row => {
        text += row.value;
        text += "\n";
      });
      this.batch_add_text = text;
    },
    batchAdd() {
      this.value1 = false;
      let list = this.batch_add_text.split("\n");
      let options = [];
      list.forEach((row, i) => {
        if (row) {
          options.push({ value: row });
        }
      });
      this.item.formConfig.options = options;
    }
  }
};
</script>

<style lang="less" scoped>
.edit-f-item {
  // margin-top: 16px;
}
.btn-area {
  display: flex;
  justify-content: space-around;
}
</style>

<style scoped>
.edit-f-item {
  overflow: hidden;
}

.edit-f-item >>> .ivu-card-head {
  background: #ef6c00;
}
.edit-f-item >>> .ivu-card-head p {
  color: #fff;
}
</style>
